<template>
  <div>
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          :rowKey="(record) => record.id"
        >
          <template
            slot="operator"
            v-if="hasPerm('sound:add')"
          >
            <a-button
              @click="$refs.addDevice.add()"
              icon="plus"
              type="primary"
              v-if="hasPerm('sound:add')"
            >新增设备</a-button>
          </template>
          <span slot="isOnline" slot-scope="text, record">
            <a-tag :color="record.isOnline?'green':'red'">{{ record.isOnline?'在线' : '离线' }}</a-tag>
          </span>
          <span
            slot="action"
            slot-scope="text, record"
          >
            <a
              v-if="hasPerm('sound:edit')"
              @click="$refs.editDevice.edit(record)"
            >编辑</a>
            <a-divider
              type="vertical"
              v-if="hasPerm('sound:edit') & hasPerm('sound:delete')"
            />
            <a-popconfirm
              v-if="hasPerm('sound:delete')"
              placement="topRight"
              title="确认删除？"
              @confirm="() => singleDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="reviewData(record)">查看数据</a>
            <a-divider type="vertical" />
            <a @click="getData(record)">获取数据</a>
          </span>
        </s-table>
        <add-device
          ref="addDevice"
          @ok="handleOk"
        />
        <edit-device
          ref="editDevice"
          @ok="handleOk"
        />
        <review-data
          ref="reviewData"
        />
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { deviceDelete } from '@/api/modular/garden/sound'
import { STable, XCard, XDown } from '@/components'
import { deviceList, syncDeviceData } from '@/api/modular/garden/sound'
import addDevice from './addDevice.vue'
import editDevice from './editDevice.vue'
import reviewData from './reviewData.vue'
export default {
  components: {
    XDown,
    XCard,
    STable,
    addDevice,
    editDevice,
    reviewData
  },

  data() {
    return {
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '设备名称',
          dataIndex: 'name',
        },
        {
          title: '设备编号',
          dataIndex: 'number',
        },
        {
          title: '设备IP地址',
          dataIndex: 'ipAddress',
        },
        {
          title: '班级',
          dataIndex: 'classesName',
        },
        {
          title: '是否在线',
          scopedSlots: { customRender: 'isOnline' },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: '300px',
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return deviceList(Object.assign(parameter, this.queryParam)).then((res) => {
          if (res.data.length) {
            console.log(res.data)
          }
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      loading:false
    }
  },

  methods: {
    /**
     * 单个删除
     */
    singleDelete(record) {
      this.sysPosDelete(record.id)
    },
    /**
     * 删除
     */
    sysPosDelete(id) {
      deviceDelete({id:id})
        .then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.clearRefreshSelected()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        })
        .catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
    },
    changeStatus(record) {
      console.log(record)
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    reviewData(record){
      this.$refs.reviewData.show(record)
    },
    getData(record){
      const params = {
        ipAddress:record.ipAddress
      }
      syncDeviceData(params)
      this.loading = true
      setTimeout(()=>{
        this.loading=false
      },10000)
      
    }
  },
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
